<!--新增功能，上半部分表单-->
<template>
  <dir class="uploadFile-box">
    <div>
      <!-- 图片 删除 重新上传 -->
      <div
        class="dialog-upload"
        v-viewer
        :src="[imagesurlstr]"
        v-if="imagesurlstr">
        <el-image
          fit="cover"
          :src="imagesurlstr" />
        <div
          class="delete-newUpload"
          v-if="!imgAttr.disabled">
          <el-button
            size="mini"
            class="delete"
            type="text text-danger"
            @click.stop="deleteImg">删除</el-button>
          <el-upload
            action="string"
            :show-file-list="false"
            accept="image/*"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeUpload"
            :http-request="toRequest"
            fit="scale-down"
          >
            <el-button
              size="mini"
              type="text text-primary">重新上传</el-button>
          </el-upload>
        </div>
      </div>
      <!-- 上传 -->
      <div v-else>
        <el-upload
          v-if="!imgAttr.disabled && !imagesurlstr"
          v-bind="imgAttr"
          class="dialog-upload"
          action="string"
          :show-file-list="false"
          accept="image/*"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeUpload"
          :http-request="toRequest"
          fit="scale-down"
        >
          <el-image
            v-if="imagesurlstr"
            style="width: 100px; height: 100px;"
            fit="cover"
            :src="imagesurlstr"
          />
          <div
            v-else
            class="tip-box">
            <div
              class="tip-uplader">
              <i class="el-icon-plus avatar-uploader-icon"/>
            </div>
            <p class="tip-font">（支持jpg/png格式，1M以内）</p>
          </div>
        </el-upload>
      </div>
    </div>
  </dir>
</template>

<script>
import { fileUpload } from '../../const/api.js'
import { fitType } from '../../const/common.js'
import { without } from 'lodash'
import { setImmediate } from 'timers'
// 文件上传限制 ------- 图片类型
const imageLimit = 'image/'
export default {
  name: 'PictureUpload',
  props: {
    // 接收默认url
    imgsrc: {
      type: String,
      default: () => ''
    },
    // 接收多张
    imgsrcarr: {
      type: Array,
      default: () => []
    },
    // 跟单独调用没有关系，该值为了配合表单组件使用
    keystr: {
      type: String,
      default: () => ''
    },
    // 类型
    uptype: {
      type: String,
      default: () => ''
    },
    // 上传属性
    attr: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      // 类型
      type: this.uptype || '',
      // 该值为了配合表单组件使用
      key: this.keystr || '',
      // 图片填充行为
      fitType,
      // 上传的地址
      uploadUrl: fileUpload,
      // 多张上传的图片地址
      imagesurlarr: this.imgsrcarr || [],
      // 单张
      imagesurlstr: this.imgsrc || '',
      // 上传属性
      imgAttr: {}
    }
  },

  methods: {
    //   删除文件
    deleteImg () {
      this.imagesurlstr = ''
      this.$emit('ReturnImgUrl', '', this.key)
    },
    // 上传图片成功 本地图片地址
    handleAvatarSuccess (res, file) {
      this.localImgurl = URL.createObjectURL(file.raw)
    },

    // 点击上传
    beforeUpload (file) {
      // 图片拦截
      const isJPG = file.type.includes(imageLimit)
      if (!isJPG) {
        this.$message.error('上传证照图片只能是图片格式!')
        return false
      }
      const isLt2M = file.size / 1024 / 1024 < 1
      if (!isLt2M) {
        this.$message.error('上传证照图片大小不能超过 1MB!')
        return false
      }
    },
    toRequest (data) {
      // 发起请求
      let fd = new FormData()
      fd.append('file', data.file)
      this.$axios({
        method: 'post',
        url: fileUpload,
        headers: { 'Content-Type': 'multipart/form-data' },
        data: fd
      }).then(res => {
        this.$message({ type: 'success', message: '上传成功' })
        // 赋值上传后的地址给文档
        if (this.type === '1') {
          this.imagesurlarr.push(res.data.payload)
          this.$emit('ReturnImgUrl', this.imagesurl, this.key)
        } else {
          this.imagesurlstr = res.data.payload
          this.$emit('ReturnImgUrl', this.imagesurlstr, this.key)
        }
      })
    }
  },

  watch: {
    imgsrc: {
      immediate: true,
      handler (val) {
        this.imagesurlstr = val
      }
    },
    attr: {
      immediate: true,
      handler (val) {
        this.imgAttr = val
      }
    }

  }
}
</script>

<style lang="less">
.uploadFile-box {
  padding: 0;

  .imglistbox {
    background: pink;
    // display: inline-block;
    float: left;

    .el-image {
      margin-right: 10px;
      cursor: pointer;
    }
  }

  .dialog-upload {
    width: 240px;
    // float: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #e5e5e5;

    .delete-newUpload {
      width: 100%;
      height: 30px;
      // background: #E5E5E5;
      display: flex;
      justify-content: space-around;

      button {
        width: 50%;
        margin: 0;
        padding: 0;
      }

      div {
        width: 50%;
        text-align: center;
      }

      .delete {
        margin: 0;
        padding: 0;
        border-right: 1px solid #dfe2e8;
      }
    }

    .el-image {
      max-width: 240px;
      height: 128px;
    }

    .tip-box {
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .tip-uplader {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 1px solid #cdd2dc;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .el-input {
    width: 211px;
  }
}
</style>
